<template>
    <div class="pad5">
        <title-a>出库红冲</title-a>
        <div>
            <div class="bcf mart5 pad5 round3 shadow1">
                <div>
                    <title-a>查询出库信息</title-a>
                </div>
                <div class="">
                    <EzData v-model="searchBox" :config="searchBoxConfig" :key="searchBoxReset"></EzData>
                </div>
                <div class="padb5">
                    <mu-button color="primary" @click="getList(1)" small>
                        <mu-icon value="search"></mu-icon>
                        <span class="padlr9">查询</span>
                    </mu-button>
                    <mu-button small class="marl10" @click="resetSearchBox()">
                        <mu-icon value="repeat"/>
                        <span class="padlr9">重置</span>
                    </mu-button>
                </div>
            </div>
            <div class="flex-r flex-start mart10 flex-fill bcf pad5 round3 shadow1">
                <div class="flex1">
                    <!--                    右侧占位 右侧显示该物品的近期出库记录-->
                    <div v-show="logs.length === 0">
                        <title-a>红冲需知</title-a>
                        <div class="flrc mdui-color-blue-50 padt10 padb10 mart10">
                            <div class="pad10">
                                <mu-icon class="mdui-text-color-blue-500" value="search" size="36"/>
                            </div>
                            <div class="flex1">
                                <div class="fs12 fwb">请先筛选出有效的出库记录</div>
                                <div >选择需要出库的项目或者筛选出库记录后，查看近期出库情况明细</div>
                            </div>
                        </div>
                        <div class="flrc mdui-color-red-50 padt10 padb10 mart10">
                            <div class="pad10">
                                <mu-icon class="mdui-text-color-red-500" value="info" size="36"/>
                            </div>
                            <div class="flex1">
                                <div class="fs12 fwb red">冲红条件</div>
                                <div class="red fwb">
                                    <p>1.出库单号，批次号，堆号完全一致无误；</p>
                                    <p>2.红冲数据会按照原有的单号，恢复到指定记录中，并不创建新记录；</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="padtb5" v-show="logs.length > 0">
                        <title-a> 关联出库单</title-a>
                        <div class="mar5 bcf lh2">

                            <div style="max-height: 600px;overflow-y: scroll">
                                <div class="flrc pad5 bc13">
                                    <div style="width: 30px;">&nbsp;</div>
                                    <div class="flex2">名称</div>
                                    <div class="flex1">数量</div>
                                    <div class="flex1">退回</div>
                                    <div class="flex1">单号</div>
                                    <div class="flex1">批次</div>
                                    <div class="flex1">堆号</div>
                                    <div class="flex1">库位</div>
                                    <div class="flex1">申请人</div>
                                    <div class="flex1">类型</div>
                                    <div class="flex2">出库时间</div>
                                </div>
                                <div class="" v-for="item in logs" :key="item.id" :class="{'mdui-color-orange-100':item.selected}">
                                    <div class="flrc pad5 bdda pointer" @click="setCurRow(item)">
                                        <div style="width: 30px;" class="flcc">
                                            <mu-radio v-model="item.selected" :value="true"></mu-radio>
                                        </div>
                                        <div class="flex2">{{item.item.text}}</div>
<!--                                        <div class="flex1" :class="{red:item.numIn !== item.numLeft,fwb:item.numIn !== item.numLeft}">{{item.numIn}} / {{item.numLeft}}</div>-->
                                        <div class="flex1">{{item.num}}</div>
                                        <div class="flex1">{{item.num-item.numCanBack}}</div>
                                        <div class="flex1">{{item.sn}}</div>
                                        <div class="flex1">{{item.heapCode}}</div>
                                        <div class="flex1">{{!item.batchCode?'-':item.batchCode}}</div>
                                        <div class="flex1">{{item.pos}}</div>
                                        <div class="flex1">{{item.applier}}</div>
                                        <div class="flex1">{{item.type.name}}</div>
                                        <div class="flex2">
<!--                                            <Time :time="item.createAt" type="datetime"></Time>-->
                                            {{$utils.getDateTime(item.createAt)}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="marl10" style="width: 400px;">
                    <title-a> 红冲信息 </title-a>
                    <ez-data :config="cancelConfig" v-model="model" :key="reloadKey"></ez-data>
                    <div class="padl60">
                        <mu-button small color="error" @click="submit">冲红</mu-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from "../OutLog/list";
    import formBuilder from "@/comps/form/formBuilder";
    import EzData from "@/comps/EzData";
    import TitleA from "@/comps/comm/TitleA";

    export default {
        name: "in_cancel",
        components: {TitleA, EzData},
        data() {
            let fb = formBuilder()
            fb.addText('item.text__regex').setSpan(2).setLabel('物品')
            fb.addText('sn__regex').setSpan(2).setLabel('单号')
            fb.addText('batchCode__regex').setSpan(2).setLabel('批次号')
            fb.addText('heapCode__regex').setSpan(2).setLabel('堆号')
            fb.addText('pos__regex').setSpan(2).setLabel('库位')

            let inForm = formBuilder().setLabelWidth(60).setLabelPosition('right')
            inForm.addText("note").setSpan(23).setLabel("原因").setMulti(true).setRows(5)
            inForm.addText("applier").setSpan(12).setLabel("经办人")
            inForm.addText("pos").setSpan(11).setLabel("出库位")


            return {
                outType: 0,//0=没出库单号相关信息，1=有出库单号相关信息

                searchBox: {isCanceled:false},
                searchBoxConfig: fb,
                searchBoxReset: 0,

                logs: [],
                reloadKey: "",
                list: {
                    page: 0,
                    limit: 10,
                    total: 0,
                },

                itemInfo: {
                    base: [],
                    log: []
                },
                model: {},
                cancelConfig: inForm,
            }
        },
        mounted() {
        },
        methods: {
            resetSearchBox() {
                this.searchBox = {isCanceled:false}
                config.searchBoxData = this.searchBox
                this.searchBoxReset = Math.random()
            },
            setSearchBox(v) {
                this.searchBox = {}
                this.searchBoxConfig.items = v
                this.searchBoxReset = Math.random()
            },
            setCurRow(row) {
                for (let item of this.logs) {
                    item.selected = item.id === row.id
                }
                this.model["outLogId"] = row.id
                this.model["pos"] = row.pos
                this.model["applier"] = row.supplier
                this.reloadKey = Math.random()
            },

            setPageSize(size) {
                this.list.limit = size
                this.getList()
            },
            getList(page) {
                if (page === undefined) {
                    page = this.list.page
                }                this.$http.post("/wms/admin/OutLog/list", {
                    _where: {...this.searchBox,"num__ne":0},
                  _dumps:["item","type","unit"],
                    page: page,
                    limit: this.list.limit
                }, res => {
                    this.logs = res.data.lists
                    this.list = res.data.query
                })
            },
            submit() {
                this.$http.post("/wms/admin/OutLog/out_cancel", this.model, res => {
                    console.log(res)
                    if (res.code === 2001){
                        this.$toast.success("操作成功")
                        this.getList()
                    }
                })

            }
        },
        watch: {
            "model.itemId"(v) {
                this.searchBox = {
                    itemId: v
                }
                this.getList(1)
            },
            outType() {
                this.model.OutLogId = 0
                this.model.itemId = 0
                if (this.outType === 1) {
                    this.searchBox = {}
                }
                this.searchBoxReset = Math.random()
            }
        }
    }
</script>

<style scoped>

</style>